<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<style type="text/css">
			.heima,
			.flip {
				text-align: center;
				background: pink;
				border: 1px solid black;
				margin: 0;
			}
			
			.heima {
				display: none;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="heima">
			<p>黑马程序员</p>
		</div>
		<p class="flip">点击我</p>

	</body>
	<script type="text/javascript">
//		$('.flip').click(function() {
//			// 向下卷起
//			$('.heima').slideDown(2000)
//		})
//		$('.flip').click(function(){
//			// 向上卷起
//			$('.heima').slideUp(2000)
//		})
         $('.flip').click(function(){
         	// 内部自动判断是向上还是向下卷起
         	$('.heima').slideToggle(2000)
         })
	</script>

</html>